<template>

    <div>
        <el-card shadow>
            <div slot="header">
                <span style="font-weight: 600;">近期合同签署统计</span>
                <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        style="float: right; margin-outside: 20px; margin-top: -10px;"
                        align="right"
                        @change="dateChange"
                        unlink-panels
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </div>
            <ve-line
                    style="height: 400px;"
                    :data="chartData"
                    :legend="chartLegend"
                    :extend="chartExtend"
                    :settings="chartSettings"
                    :grid="chartGrid"
                    v-bind="pubSetting">
            </ve-line>

        </el-card>
    </div>
</template>

<script>
    import list from '@/components/charts/_mixin/list.js'


    export default {
        name: "ContractStatisticsOfDateRange",
        mixins: [
            list
        ],
        data() {

            this.chartLegend = {
                show: true,
                bottom: 5,
                left: 'center',
                orient: "horizontal"
            };
            this.chartGrid = {
                top: 20,
                left: 20,
                right: 20,
                bottom: 30
            };
            this.chartExtend = {
                'xAxis.0.axisLabel.rotate': 45,
                series: {
                    barWidth: 10,
                    label: {
                        normal: {
                            show: true
                        }
                    }
                }
            };
            this.chartSettings = {
                min:1,
                labelMap: {
                    'totalCount': '总数',
                    'completedCount': '完成',
                    'doingCount': '签署中',
                    'failCount': '无效作废',
                }
            };

            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                dateRange: '',
                chartData: {
                    columns: ['dateTime', "totalCount", "completedCount", "doingCount", 'failCount'],
                    rows: []
                },
                queryParams: {
                    startDate: '',
                    endDate: '',
                }

            }
        },
        methods: {
            init() {
                //近7天贷款统计
                //活跃用户今日统计
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                this.dateRange = [start, end];

                // let params = {
                //   startDate: moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),
                //   endDate: moment(new Date()).format('YYYY-MM-DD')
                // };
                this.getNearDateContractRecordsData();
            },

            getNearDateContractRecordsData: function(){
                let params = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange[1]
                };
                this.$http.get('/statistics/getNearDateContractRecordsData', params).then(res => {
                    this.chartData.rows = res;
                }).catch(() => {
                })
            },

            dateChange(date) {
                this.dateRange = date;
                this.getNearDateContractRecordsData();
            }

        },
        mounted() {
            this.init();
        }
    }
</script>

<style lang="scss" scoped>
    .inner {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

</style>
